<template>
  <div class="card">
    <div class="card-header">
      <div class="card-icon" :class="iconClass">
        <span style="font-size: 24px; color: white;">{{ icon }}</span>
      </div>
      <div class="card-title">{{ title }}</div>
    </div>
    <div class="card-value">{{ value }} {{ unit }}</div>
    <div class="card-status" :class="statusClass">{{ statusText }}</div>
    <div class="card-footer">理想范围: {{ normalRange }}</div>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    icon: String,
    value: {
      type: [String, Number],  // 允许字符串或数字类型
      default: '--'
    },
    unit: String,
    normalRange: String,
    status: String
  },
  computed: {
    iconClass() {
      return {
        'bp-icon': this.title === '血压',
        'bs-icon': this.title === '血糖',
        'hr-icon': this.title === '心率'
      };
    },
    statusClass() {
      return {
        normal: this.status === 'normal',
        warning: this.status === 'warning',
        danger: this.status === 'danger',
        loading: this.status === 'loading'
      };
    },
    statusText() {
      if (this.status === 'loading') return '加载中...';
      if (this.status === 'normal') return '正常范围';
      if (this.status === 'warning') return '临界值';
      if (this.status === 'danger') return '异常值';
      return '无数据';
    }
  }
};
</script>


<style scoped>
@import "@/assets/css/analysis..css";
</style>